Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 | 'use client';
import { ContentType } from '@/types';
export type ContentFiltersProps = {
t: (key: string, options?: Record<string, any>) => string;
selectedCategory: ContentType;
searchTerm: string;
setSearchTerm: (value: string) => void;
yearFilter: string;
setYearFilter: (value: string) => void;
filterActive: 'all' | 'active' | 'inactive';
setFilterActive: (value: 'all' | 'active' | 'inactive') => void;
providerFilter: string;
setProviderFilter: (value: string) => void;
countryFilter: string;
setCountryFilter: (value: string) => void;
setPage: (value: number) => void;
showColumns: boolean;
setShowColumns: (value: boolean) => void;
colDescription: boolean;
setColDescription: (value: boolean) => void;
colType: boolean;
setColType: (value: boolean) => void;
colStatus: boolean;
setColStatus: (value: boolean) => void;
colCreated: boolean;
setColCreated: (value: boolean) => void;
typeColumnLabel: string;
};
export default function ContentFilters({
t,
selectedCategory,
searchTerm,
setSearchTerm,
yearFilter,
setYearFilter,
filterActive,
setFilterActive,
providerFilter,
setProviderFilter,
countryFilter,
setCountryFilter,
setPage,
showColumns,
setShowColumns,
colDescription,
setColDescription,
colType,
setColType,
colStatus,
setColStatus,
colCreated,
setColCreated,
typeColumnLabel}: ContentFiltersProps) {
return (
<>
{/* Filters */}
<div className="flex items-center gap-3 bg-white/80 border border-slate-200 rounded-lg px-3 py-2 shadow-sm text-slate-700 dark:bg-slate-800/70 dark:border-slate-700 dark:text-slate-100">
<input
type="text"
className="bg-transparent outline-none text-sm text-slate-800 placeholder:text-slate-400 dark:text-slate-100 dark:placeholder:text-slate-500"
placeholder={t('common.search') as string}
value={searchTerm}
onChange={(e) => { setSearchTerm(e.target.value); setPage(1); }}
/>
<input
type="number"
className="bg-transparent outline-none text-sm w-24 text-slate-800 placeholder:text-slate-400 dark:text-slate-100 dark:placeholder:text-slate-500"
placeholder={t('common.year', {}) as string}
value={yearFilter}
onChange={(e) => { setYearFilter(e.target.value); setPage(1); }}
/>
<select
className="bg-transparent text-sm outline-none text-slate-800 dark:text-slate-100"
value={filterActive}
onChange={(e) => { setFilterActive(e.target.value as 'all' | 'active' | 'inactive'); setPage(1); }}
>
<option value="all">{t('common.all')}</option>
<option value="active">{t('common.active')}</option>
<option value="inactive">{t('common.inactive')}</option>
</select>
{(selectedCategory === ContentType.TV || selectedCategory === ContentType.EVENTS) && (
<>
<input
type="text"
className="bg-transparent outline-none text-sm w-28 text-slate-800 placeholder:text-slate-400 dark:text-slate-100 dark:placeholder:text-slate-500"
placeholder={t('common.provider', {}) as string}
value={providerFilter}
onChange={(e) => { setProviderFilter(e.target.value); setPage(1); }}
/>
<input
type="text"
className="bg-transparent outline-none text-sm w-28 text-slate-800 placeholder:text-slate-400 dark:text-slate-100 dark:placeholder:text-slate-500"
placeholder={t('common.country', {}) as string}
value={countryFilter}
onChange={(e) => { setCountryFilter(e.target.value); setPage(1); }}
/>
</>
)}
<button
className="ml-2 text-xs underline text-slate-500 hover:text-slate-700 dark:text-slate-400 dark:hover:text-slate-200"
onClick={() => setShowColumns(!showColumns)}
>
{t('common.columns', {})}
</button>
</div>
{showColumns && (
<div className="flex items-center gap-3 bg-white/80 border border-slate-200 rounded-lg px-3 py-2 shadow-sm text-slate-700 dark:bg-slate-800/70 dark:border-slate-700 dark:text-slate-100">
<label className="text-xs flex items-center gap-1">
<input type="checkbox" checked={colDescription} onChange={(e) => setColDescription(e.target.checked)} /> {t('content.table.columns.description')}
</label>
<label className="text-xs flex items-center gap-1">
<input type="checkbox" checked={colType} onChange={(e) => setColType(e.target.checked)} /> {typeColumnLabel}
</label>
<label className="text-xs flex items-center gap-1">
<input type="checkbox" checked={colStatus} onChange={(e) => setColStatus(e.target.checked)} /> {t('content.table.columns.status')}
</label>
<label className="text-xs flex items-center gap-1">
<input type="checkbox" checked={colCreated} onChange={(e) => setColCreated(e.target.checked)} /> {t('content.table.columns.created')}
</label>
</div>
)}
</>
);
}
|